<template>
  <div class="page-content pt-24">
    <div class="layout">
      <div class="left mr-24">
        <banner
          v-if="bannerList && bannerList.length > 0"
          :list="bannerList"
          class="mb-16"
        />

        <topic-summary
          v-for="(item, index) in listData"
          :key="index"
          :obj="item"
        />
        <no-more class="mb-24" />
      </div>

      <div class="right">
        <hot-and-recommended :hot-list="[]" :related-list="relatedList" />
      </div>
    </div>
  </div>
</template>

<script>
import TopicSummary from '@/components/TopicSummary.vue';
import Banner from '@/components/Banner.vue';
import HotAndRecommended from '@/components/HotAndRecommended.vue';
import NoMore from '@/components/NoMore.vue';

export default {
  name: 'TopicListPage',

  components: {
    TopicSummary,
    Banner,
    HotAndRecommended,
    NoMore
  },

  async asyncData({ $API }) {
    const [listData, relatedList, bannerListRes] = await Promise.all([
      $API.subjectListFeatureds(),
      $API.articleGetSelectedNews(),
      $API.articleGetBannerList({ sourceType: 16 })
    ]);

    return {
      listData,
      relatedList,
      bannerList: bannerListRes
    };
  },

  data() {
    return {
      showLoading: false,
      total: 0,
      listData: [],
      bannerList: []
    };
  }
};
</script>

<style lang="scss" scoped>
@import '~assets/styles/variable.scss';

.page-content {
  width: $page-width;
  margin: 0 auto;

  .layout {
    display: flex;

    .left {
      width: $page-left-width;
    }

    .right {
      width: $page-right-width;
    }
  }
}
</style>
